<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="../../assets/iconfont.js"></script>
    <link rel="stylesheet" href="../../assets/css/common.css" />
    <link rel="stylesheet" href="../../assets/element-ui/index.css" />
    <link rel="stylesheet" href="./index.min.css" />
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }
    </style>
    <title>番茄钟</title>
</head>

<body>
    <div id="app" class="plant-t-clock-tomato">
        <div class="clock-list" @click="handleListClick"></div>
        <div class="clock-setting" @click="handleSettingOpen"></div>
        <div class="clock-box">
            <div class="box">
                <div class="time">
                    {{fTime??'00:00'}}
                </div>
                <div class="control" @click="handleClockStatusChange">
                    <svg class="iconfont" aria-hidden="true">
                        <use :xlink:href="'#'+(isWorking?'icon-daochu1024-16':'icon-daochu1024-15')"></use>
                    </svg>
                </div>
            </div>
        </div>
        <el-drawer title="番茄钟设置" :visible.sync="showSetting" direction="rtl" size="50%" :show-close="false">
            <el-form ref="form" :model="dataForm" label-width="80px">
                <el-form-item label="计时分钟">
                    <!-- <el-input v-model="dataForm.time"></el-input> -->
                    <el-input-number v-model="dataForm.time" :min="1" :max="120"></el-input-number>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSettingSave" type="primary">保存</el-button>
                    <el-button @click="showSetting=false">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
        <el-drawer :visible.sync="showList" direction="ltr" size="50%" :show-close="false">
            <div slot="title">
                <span>今日番茄</span>
                <span style="padding:0 5px 0 10px;color:#FF9966;"><i
                        class="el-icon-orange"></i>&nbsp;{{tomatoList.length}}</span>
                <span style="padding:0 5px;color:#99CC99;"><i class="el-icon-time"></i>&nbsp;{{allTomatoTime}}</span>
                <div class="clear-btn" @click="handleClearList" style="float:right"><i class="el-icon-delete"></i></div>
            </div>
            <div class="tomato-card" v-for="item,index in tomatoList" :key="index">
                <div class="info">
                    <div class="status finished" v-if="item.status">
                        <i class="el-icon-success"></i>&nbsp;已完成
                    </div>
                    <div class="status break" v-else>
                        <i class="el-icon-error"></i>&nbsp;被中止
                    </div>
                    <div class="time">
                        <i class="el-icon-time"></i>
                        &nbsp;
                        {{item.space?parseMSTime(item.space):(`${(item.time>10?item.time:'0'+item.time)}:00`)}}
                    </div>
                </div>
                <div class="date"><i class="el-icon-date"></i>&nbsp;开始于 {{parseTime(item.date)}}</div>
            </div>
            <el-empty v-if="!tomatoList.length" description="今日还没有番茄"></el-empty>
        </el-drawer>
    </div>
</body>
<script src="../../assets/js/vue2.js"></script>
<script src="../../assets/element-ui/index.js"></script>
<script src="../../assets/element-ui/et.js"></script>
<script>
    Vue.config.productionTip = true
    new Vue({
        el: '#app',
        data: {
            staticPath: '../../assets',
            plugins: new Plugins(),
            isWorking: false,
            frontTask: undefined,
            remaining: undefined,
            showSetting: false,
            dataForm: { time: 40 },
            tomatoList: [],
            showList: false,
        },
        mounted() {
            //1.读取主进程是否有未完成任务
            //2.如果没有则初始化,读取上一次的番茄设置
            window.addEventListener("DOMContentLoaded", () => {
                window.$.onIpc('tomato', (e, tomatoRemaining) => {
                    if (tomatoRemaining) {
                        //有未完成的番茄钟
                        this.isWorking = true
                        this.initFrontTask(tomatoRemaining)
                    }
                })
                window.$.onIpc('tomato-data', (e, { key, data }) => {
                    console.log('获取数据', key, data)
                    if (key == "TOMATO_DATA_LIST") {
                        this.tomatoList = data;
                    }
                    if (key == "TOMATO_DATA_SETTING") {
                        this.dataForm = data;
                        if (!this.isWorking) {
                            this.remaining = this.dataForm.time * 60 * 1000
                        }
                    }
                })
                window.$.sendIpc('main-pad-getdata-tomato', 'TOMATO_DATA_SETTING')
                window.$.sendIpc('main-pad-get-tomato')
            });
        },
        computed: {
            //计算显示时间
            fTime() {
                if (!this.remaining) return
                return this.parseMSTime(this.remaining)
            },
            //计算list总番茄时长
            allTomatoTime() {
                let value = 0
                for ({ status, time, space } of this.tomatoList) {
                    value += (status == '1' ? time * 60 * 1000 : space)
                }
                let h = Math.floor(value / 1000 / 60 / 60)
                let m = Math.floor(value / 1000 / 60 % 60)
                let s = Math.floor(value / 1000) % 60
                h = h < 10 ? '0' + h : h
                m = m < 10 ? '0' + m : m
                s = s < 10 ? '0' + s : s
                return `${h}:${m}:${s}`
            }
        },
        methods: {
            //解析显示时间 只显示时分秒
            parseTime(timeMils) {
                const date = new Date(timeMils);
                let h = date.getHours()
                let m = date.getMinutes()
                let s = date.getSeconds()
                h = h < 10 ? '0' + h : h
                m = m < 10 ? '0' + m : m
                s = s < 10 ? '0' + s : s
                return `${h}:${m}:${s}`
            },
            //解析分秒时间
            parseMSTime(timeMils) {
                let m = Math.floor(timeMils / 1000 / 60)
                let s = Math.floor(timeMils / 1000) % 60
                m = m < 10 ? '0' + m : m
                s = s < 10 ? '0' + s : s
                return `${m}:${s}`
            },
            //点击按钮
            handleClockStatusChange() {
                if (!this.isWorking) {
                    //开始
                    this.setMainTask()
                    this.initFrontTask()
                    this.plugins.notifySuccess('开始新的番茄钟')
                } else {
                    this.stopMainTask()
                    this.stopFrontTask()
                    this.plugins.notify('番茄钟已中止')

                }
                this.isWorking = !this.isWorking
            },
            //初始化前台任务
            initFrontTask(time) {
                //初始化前端显示任务
                if (time) {
                    this.remaining = time
                }
                this.frontTask = setInterval(() => {
                    this.remaining -= 1000
                    if (this.remaining <= 0) {
                        //任务走完
                        this.stopFrontTask()
                    }
                }, 1000)
            },
            //初始化后台任务
            setMainTask() {
                window.$.sendIpc('main-pad-set-tomato', { remaining: this.remaining, tomatoData: { time: this.dataForm.time, date: new Date().getTime() } })
            },
            //停止任务
            stopMainTask() {
                window.$.sendIpc('main-pad-stop-tomato')
            },
            stopFrontTask() {
                clearInterval(this.frontTask)
                this.frontTask = undefined
                this.isWorking = false
                this.remaining = this.dataForm.time
            },
            //打开设置面板
            handleSettingOpen() {
                this.showSetting = true
            },
            //保存设置
            handleSettingSave() {
                window.$.sendIpc('main-pad-setdata-tomato', { setting: this.dataForm })
                if (!this.isWorking) {
                    this.remaining = this.dataForm.time * 60 * 1000
                }
                this.plugins.notifySuccess('保存成功')
                this.showSetting = false
            },
            //打开今日番茄
            handleListClick() {
                window.$.sendIpc('main-pad-getdata-tomato', 'TOMATO_DATA_LIST')
                this.showList = true
            },
            handleClearList() {
                window.$.sendIpc('main-pad-clearlist-tomato')
                setTimeout(() => {
                    this.handleListClick()
                }, 300)
            }
        }
    })
</script>

</html>